(function($){
	function Vcontroller(settings){
		$.extend(this,settings);
    	return this.init(settings);
	}
	Vcontroller.prototype = {
		constructor : "Vcontroller",
		init : function(settings){
			var self = this;
			self.container = $(self.container);
			self.settings = settings;
			self.createControl();
			self.playPauseBtn = self.container.find('.mtc-playpause');
			self.leftBtn = self.container.find('.mtc-trimgripper-left');
			self.rightBtn = self.container.find('.mtc-trimgripper-right');
			self.progressbar = self.container.find('.mtc-progressbar');
			self.trimbg = self.container.find('.mtc-trimgripper');
			self.timecode = self.container.find('.mtc-timecode');
			self.trimprogress = self.container.find('.mtc-trimprogress');
			self.startTime = 0;
			self.timer = null;
			self.data = {
				prevLeft : ''
			}
			self.video = $(self.vid).get(0);
			self.playPause();
			self.setBar();
			self.dragbar();
			self.timeupdate();
		},
		createControl : function(){
			var self = this;
			var template = `<div class="mtc-controls">
					          <div class="mtc-timecode">0:00</div>
					          <div class="mtc-scrubbar" style="width: 504px;"></div>
					          <div class="mtc-progressbar" style="width: 504px;"></div>
					          <div class="mtc-playpause" data-action="pause"></div>
					          <div class="mtc-trim">
					          	    <div class="mtc-trimgripper" data-startTime="0">
					          	    	<div class="mtc-trimprogress"></div>
					          	  		<div class="mtc-trimgripper-left" style="left: 0px;"></div>
							            <div class="mtc-trimgripper-right" style="right: 0px;"></div>
					          	    </div>
					              
					          </div>
					      </div>`;
			self.container.html(template);
		},

		playPause : function(){
			var self = this;
			self.playPauseBtn.off('click').on('click',function(){
				if($(this).hasClass('mtc-playpause-toggled')){ 
					// 在播放
					self.video.pause();
					clearInterval(self.timer);
					$(this).removeClass('mtc-playpause-toggled');
				}else{
					self.video.play();
					$(this).addClass('mtc-playpause-toggled');
					self.timer = setInterval(function(){
						self.progressing();
					},60)
				}
			})
		},
		setBar : function(){
			var self = this;
			self.video.oncanplay = function(){
				// 视频加载完毕
				var cutLength = self.settings.cutTime / self.video.duration * self.progressbar.width();
				self.trimbg.css({
					'width' : cutLength,
				})
			}
		},
		dragbar : function(){
			var self = this;
			self.trimbg.on('mousedown',function(e){
				self.mouseDownFn(e);
        		$(document).mousemove(function(e){
					self.mouseMoveFn(e);
				});
				// 鼠标抬起
				$(document).mouseup(function(e){
					self.bBtn = true;
					document.onmousemove = null;
					document.onmouseup = null;
				});
				return false;
			})
		},
		mouseDownFn : function(e){
			var self = this;
			self.bBtn = false;
			self.data.X = e.pageX;
			self.data.positionX = self.trimbg.position().left;
		},
		mouseMoveFn : function(e){
			var self = this;
			self.data.sDisX = e.pageX - self.data.xPage;
			self.data.xPage = e.pageX;
			self.data.disX = self.data.xPage - self.data.X;
			self.data.moveX = self.data.positionX + self.data.disX;
		
			if(self.data.moveX >= 0 && !self.bBtn){
				if(self.data.moveX > self.progressbar.width() - self.trimbg.width()){
					self.trimbg.css({"left": self.progressbar.width() - self.trimbg.width()});
				}else{
					self.trimbg.css({"left": self.data.moveX});
					self.video.currentTime = self.startTime = self.data.moveX / self.progressbar.width() * self.video.duration;
					self.trimprogress.css('width',0);
					clearInterval(self.timer);

					self.trimbg.data("startTime",self.startTime);
					self.timecode.html(self.calShowTIme(self.startTime));

					if(self.playPauseBtn.hasClass('mtc-playpause-toggled')){ 
						self.video.play();
						self.timer = setInterval(function(){
							self.progressing();
						})
					}
				}
				
			}else if(self.data.moveX < 0 && !self.bBtn){
				self.trimbg.css({"left": 0});
			}

		},
		timeupdate : function(){
			var self = this;
			self.video.addEventListener("timeupdate",function(){
				var endTime = self.startTime + self.settings.cutTime;
				if(self.video.currentTime > endTime){
					self.video.pause();
					self.playPauseBtn.removeClass('mtc-playpause-toggled');
					clearInterval(self.timer)
				}
			});
		},
		calShowTIme : function(s){
			s = parseInt(s)
			var minute = Math.floor(s/60) + '';
			var seconds = s%60 + ''

			var showM = minute.length > 1 ? minute : '0' + minute;
			var showS = seconds.length > 1 ? seconds : '0' + seconds;

			return showM + ":" + showS;
		},
		progressing : function(){
			var self = this;
            var percent = (self.video.currentTime-self.startTime)/self.settings.cutTime * 100;  
            percent = percent > 100 ? 100 : percent;
            self.trimprogress.css('width' , percent + "%");
        }
	}
	
	
	$.fn.Vcontroller = function(settings){
		var instance;
		var instanceSetting;
		//迭代的方式
		this.each(function(){
            // 合并配置
            instanceSetting = $.extend(true,{},$.fn.Vcontroller.defaultSetting,settings);
            instance = new Vcontroller($.extend({container:$(this)},instanceSetting));
		});
		// 返回裁剪的时段
        return this;
	}
	$.fn.Vcontroller.defaultSetting = {
		cutTime : 2,
		vid: ''
	}


})(jQuery)